<template>
	<view class="video-device-form">
		<!-- 	<view class="header">
			<text class="header-title">厂商管理</text>
		</view> -->


		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog title="新增厂商" :before-close="true" @close="close()" @confirm="add()">
				<uni-forms ref="mForm" :rules="rules" :modelValue="formData" class="form-container-box">
					<uni-forms-item label="厂商" required name="manufacturersName" class="info-item">
						<uni-easyinput v-model="formData.manufacturersName" placeholder="请输入厂商名称" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>



		<view class="deatail-btn" v-for="(m, index) in mList" :key="index">
			<view class="text-btn">
				<p>{{m.manufacturersName}}</p>
				<view class="uni-icon" @click="deleteItem(m)">
					<uni-icons type="trash" size="25" color='#6666'></uni-icons>
				</view>
			</view>

		</view>



		<button type="primary" class="header-btn" @click="open()">
			<view class="icon-box">
				<image style="width: 15px; ;" src="../../static/lu_03.png" alt="" class="icon" />
			</view>
			<view class="btn-text">
				新增厂家
			</view>
		</button>

	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { changeData, getJsonData } from '../../js_sdk/file';
	const inputDialog = ref()

	const mForm = ref()
	const mList = ref([])
	const formData = ref({
		manufacturersName: ''
	})

	const rules = ref({
		manufacturersName: {
			rules: [{
				required: true,
				errorMessage: '厂商名称不能为空'
			}]
		},
	})


	onMounted(async () => {
		let filePath = '_doc/test/manufacturers.json'
		let dataJson = await getJsonData(filePath)
		if (dataJson !== '') {
			const defaultInfo = JSON.parse(dataJson);
			mList.value = defaultInfo
		}
	})


	const open = () => {
		inputDialog.value.open()
	}
	const close = () => {
		inputDialog.value.close()
	}


	const add = async () => {
		let filePath = '_doc/test/manufacturers.json'
		const valid = await mForm.value.validate();
		let array = []
		if (valid) {
			//json序列化深拷贝
			// let data = JSON.parse(JSON.stringify(formData.value));
			array = mList.value
			let param = { manufacturersName: formData.value.manufacturersName }
			array.push(param)
			console.log(array);
			const change = await changeData(filePath, 0, array);
			uni.showToast({
				title: '添加成功',
				icon: 'none'
			});
			uni.redirectTo({
				url: '/pages/manufacturers/manufacturers'
			})
			inputDialog.value.close()
			formData.value.manufacturersName = ""
		} else {
			//校验失败
		}
	}

	const doDelete = async (item) => {
		let filePath = '_doc/test/manufacturers.json'
		let newList = mList.value.filter((e) => {
			return e.manufacturersName !== item.manufacturersName
		})
		const change = await changeData(filePath, 0, newList);
		uni.showToast({
			title: '删除成功',
			icon: 'none'
		});
		uni.redirectTo({
			url: '/pages/manufacturers/manufacturers'
		})
	}

	const deleteItem = (item) => {
		// deleteDialog.value.open()
		uni.showModal({
			title: '提示',
			content: '确定要删除么',
			confirmText: "确定",
			cancelText: "取消",
			showCancel: true,
			success: function (res) {
				if (res.confirm) {
					doDelete(item)
				}
				if (res.cancel) {
					console.log(2);
				}
			}
		})
	}
</script>

<style>
	/* 基本样式 */
	.video-device-form {
		padding: 20px;
		background-color: #f7f7f7;
		height: 100%;

	}

	.header {
		/* border: 1px solid red; */
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 20px;
		position: relative;
	}


	.header-title {
		font-size: 24px;
		color: #666;
	}

	.deatail-btn {
		padding: 10px;
		/* border: 1px solid red; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text-btn {
		width: 500px;
		padding: 15px;
		background-color: #fff !important;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		/* 确保子元素不会溢出 */

		p {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-right: 30px;
			/* 为图标留出空间 */
			color: #48b0b1 !important;
		}
	}

	.uni-icon {
		/* margin-left: 20px; */
		position: absolute;
		right: 5px;

	}



	.header-btn {
		margin-top: 20px;
		width: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		/* margin-right: 20px; */
		background-color: #48b0b1 !important;
		position: relative;


	}


	.icon-box {
		width: 15px;
		height: 15px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.icon {
		width: 100%;
		height: 100%;
	}


	.btn-text {
		margin-left: 10px;
	}
</style>